<template>
  <!--PH值横向柱状图-->
  <div id="ph-bar" style="height: 23vh; width: 100%; margin: 0 auto;"></div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "PHBar",
  props: ['ph'],
  watch: {
    ph() {
      this.initEcharts()
    }
  },
  methods: {
    initEcharts() {
      let myChart = echarts.init(document.getElementById("ph-bar"))

      // 监听屏幕变化自动缩放图表
      window.addEventListener('resize', function () {
        myChart.resize()
      })

      // ph值
      let phValue = this.ph

      let option = {
        title: {
          text: '泳池PH值',
          x: 'center',
          textStyle: {
            color: '#eeeaea'
          }
        },
        grid: {
          top: 0,
          bottom: 0,
          left: "10%",
          right: "10%"
        },
        xAxis: {
          show: false,
          type: "value",
          boundaryGap: [0, 0]
        },
        yAxis: [
          {
            type: "category",
            data: [""],
            axisLine: {show: false},
            axisTick: [
              {
                show: false
              }
            ]
          }
        ],
        series: [
          {
            name: "金额",
            type: "bar",
            zlevel: -1,
            itemStyle: {
              normal: {
                barBorderRadius: 30,
                color: 'rgb(207,211,217)'
              }
            },
            markPoint: {
              data: [
                {type: 'max', name: '当前值'},
              ],
              symbolSize: [30, 50],
              symbol: "path://M192 128.384C192 57.472 248.768 0 320 0h384c70.72 0 128 56.832 128 128.384v516.352c0 35.456-20.032 83.84-45.824 109.312L512 1024 237.824 754.048C212.544 729.088 192 680.32 192 644.736V128.384z m94.976 33.664v427.136c0 35.328 20.736 83.392 46.4 107.84l177.6 169.408 177.6-169.408c25.728-24.512 46.4-72.704 46.4-107.84V162.048a63.744 63.744 0 0 0-64.192-63.616H351.168a63.424 63.424 0 0 0-64.192 63.616z",
              label: {
                color: '#FFF'
              }
            },
            barWidth: 20,
            data: [phValue]
          },

          {
            name: "背景",
            type: "bar",
            barWidth: 20,
            barGap: "-100%",
            data: [14],
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
                  {
                    offset: 1,
                    color: "#a90101"
                  },
                  {
                    offset: 0.8,
                    color: "#fd6500"
                  },
                  {
                    offset: 0.5,
                    color: "#fdcf10"
                  },
                  {
                    offset: 0.4,
                    color: "#027f24"
                  },
                  {
                    offset: 0.2,
                    color: "#002f06"
                  },
                  {
                    offset: 0.1,
                    color: "#2f0355"
                  },
                  {
                    offset: 0,
                    color: "#180910"
                  },
                ]),
                barBorderRadius: 30
              }
            }
          }
        ]
      }

      myChart.setOption(option)
    }
  },
  mounted() {
    this.initEcharts()
  }
}
</script>

<style scoped>

</style>
